<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('主子表提交')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;

        }

    </style>

</head>


<body class="gray-bg">

<div class="main-content">
    <form id="form-add" class="form-horizontal">

        <input name="checkId" type="hidden" id="checkId"/>

        <h4 class="form-header h4"><span class="h4" th:text="${programName}"></span> &nbsp;&nbsp;检测数据</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:src="@{/js/jquery.tmpl.js}"></script>

<script th:inline="javascript">

    /* 模块前缀url */
    var prefix = ctx + "concreteManage";

    /* 初始化 数据 */
    var buildingNumber = [[${buildingNumber}]];
    var floorNumber = [[${floorNumber}]];
    var checkId = [[${checkId}]];


    /* 初始化 方法 */
    $(function () {
        // bindDatetimepicker();
        $("#checkId").val(checkId);
        var options = {
            url: prefix + "/detailListData?checkId=" + checkId,
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'building',
                    align: 'center',
                    title: '工程部位(楼号)',
                    formatter: function (value, row, index) {
                        var html = '';
                        html += '<select class="form-control building"  name="concrete[' + index + '].buildingNumber" id="buildingNumber' + index + '"><option value="">请选择</option>';
                        for (var i = 0; i < buildingNumber.length; i++) {
                            if (buildingNumber[i].id == value) {
                                html += "<option value='" + buildingNumber[i].id + "'  selected >" + buildingNumber[i].name + "</option>";
                            } else {
                                html += "<option value='" + buildingNumber[i].id + "'>" + buildingNumber[i].name + "</option>";
                            }
                        }
                        html += '</select>';
                        return html;
                    }
                },
                {
                    field: 'floor',
                    align: 'center',
                    title: '结构部位(楼层)',
                    formatter: function (value, row, index) {
                        var html = '';
                        html += '<select class="form-control floor"  name="concrete[' + index + '].floorNumber" id="floorNumber' + index + '"><option value="">请选择</option>';
                        for (var i = 0; i < floorNumber.length; i++) {
                            if (floorNumber[i].dictCode == value) {
                                html += "<option value='" + floorNumber[i].dictCode + "' selected>" + floorNumber[i].dictValue + "</option>";
                            } else {
                                html += "<option value='" + floorNumber[i].dictCode + "'>" + floorNumber[i].dictValue + "</option>";
                            }
                        }
                        html += '</select>';
                        return html;
                    }
                },
                {
                    field: 'pouringTime',
                    align: 'center',
                    title: '浇筑日期',
                    disable: true,
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf('<input class="form-control testf" type="text" placeholder="yyyy-MM-dd" id="pouringTime' + index + '"  value="' + value + '" name="' + 'concrete[' + index + '].pouringTime' + '"  autocomplete=\'off\' readonly>', index, value);

                        return html;
                    }
                },
                {
                    field: 'checkTime',
                    align: 'center',
                    title: '检测日期',
                    disable: true,
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf('<input class="form-control testf" type="text" placeholder="yyyy-MM-dd" id="checkTime' + index + '"  value="' + value + '" name="' + 'concrete[' + index + '].checkTime' + '"  autocomplete=\'off\' onfocus="formatDate()" onblur="getAge(' + index + ')">', index, value);
                        return html;
                    }
                },
                {
                    field: 'age',
                    align: 'center',
                    title: '龄期',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf('<input class="form-control testf" type="text" id="age' + index + '"  value="' + value + '" name="' + 'concrete[' + index + '].age' + '"  autocomplete=\'off\' id="age' + index + '" readonly>', index, value);
                        return html;
                    }
                },
                {
                    field: 'designLabel',
                    align: 'center',
                    title: '设计标号(Mpa)',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf('<input class="form-control" onkeyup="value=value.replace(/[^\\d]/g,\'\')" id="designLabel' + index + '"  value="' + value + '" name="' + 'concrete[' + index + '].designLabel' + '"  autocomplete=\'off\'>', index, value);
                        return html;
                    }
                },
                {
                    field: 'averIntensity',
                    align: 'center',
                    title: '强度平均(Mpa)',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf('<input class="form-control" id="averIntensity' + index + '" onblur="changeData(' + index + ')" value="' + value + '" name="' + 'concrete[' + index + '].averIntensity' + '"  autocomplete=\'off\' onkeyup=\"clearNoNum(this)\">', index, value);
                        return html;
                    }
                },
                {
                    field: 'minIntensity',
                    align: 'center',
                    title: '强度最小(Mpa)',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='concrete[%s].minIntensity' value='%s' autocomplete='off' onkeyup=\"clearNoNum(this)\">", index, value);
                        return html;
                    }
                },
                {
                    field: 'testPerson',
                    align: 'center',
                    title: '检测人员',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='concrete[%s].testPerson' value='%s' autocomplete='off'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'note',
                    align: 'center',
                    title: '碳化深度',
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='concrete[%s].note' value='%s' autocomplete='off'>", index, value);
                        return html;
                    }
                }
            ]
        };
        $.table.init(options);
        // 初始化日期控件
        formatDate();

    });


    function formatDate() {
        setTimeout(function () {
            layui.use('laydate', function () {
                var laydate = layui.laydate;

                laydate.render({
                    elem: '#checkTime0'
                });

            });
        }, 100)
    }

    /* 提交按钮 */
    function submitHandler() {
        var data = $("#form-add").serializeArray();
        // for (var m = 0; m < data.length; m++) {
        //     var value = data[m].value;
        //     if (value == '') {
        //         $.modal.alertWarning("请完善报表信息");
        //         return;
        //     }
        // }
        $.operate.saveTab(prefix + '/edit', data);
    }

    /* 龄期 */
    function getAge(index) {
        setTimeout(function () {
            console.log($("#" + 'pouringTime' + index).val());
            console.log($("#" + 'checkTime' + index).val());
            if ($("#" + 'pouringTime' + index).val() != '' && $("#" + 'checkTime' + index).val() != '') {
                // 判断检测日期大于浇筑日期
                var flag = tab($("#" + 'pouringTime' + index).val(), $("#" + 'checkTime' + index).val())
                if (flag == true) {
                    var age = GetNumberOfDays($("#" + 'pouringTime' + index).val(), $("#" + 'checkTime' + index).val())
                    $("#" + 'age' + index).attr("value", age)
                } else {
                    $.modal.alertWarning("检测日期要大于浇筑日期");
                    return
                }
            } else {
                $("#" + 'age' + index).attr("value", "")
            }
        }, 200)
    }

    /* 日期相减 */
    function GetNumberOfDays(date1, date2) {//获得天数
        //date1：开始日期，date2结束日期
        var a1 = Date.parse(new Date(date1));
        var a2 = Date.parse(new Date(date2));
        var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24));//核心：时间戳相减，然后除以天数
        return day
    };

    /* 日期比较 */
    function tab(date1, date2) {
        var oDate1 = new Date(date1);
        var oDate2 = new Date(date2);
        if (oDate1.getTime() > oDate2.getTime()) {
            return false;
        } else {
            return true;
        }
    }

    /* 失焦校验:强度平均(Mpa) */
    function changeData(index) {
        if ($("#" + 'designLabel' + index).val() != '') {
            if (Number($("#" + 'averIntensity' + index).val()) > (Number($("#" + 'designLabel' + index).val()) - 5)) {
                $("#" + 'averIntensity' + index).css('border', ' 1px solid red');
            } else {
                $("#" + 'averIntensity' + index).css('border', ' 1px solid #E7EAEC');
            }
        }
    }

    /* 校验:保留一位小数 */
    function clearNoNum(obj) {
        obj.value = obj.value.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
        obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
        obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3');
        if (obj.value.indexOf(".") < 0 && obj.value != "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
            obj.value = parseFloat(obj.value);
        }
    }

</script>
</body>
</html>
</script>